<!DOCTYPE html>
<html xmlns:http="http://www.w3.org/1999/xhtml">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title th:text="${liveInfo.title}"></title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="keywords" content="松果直播，专注企业直播，活动直播，我们重新定义校媒体">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.css">-->
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.css">

    <style>
        .player {
            width: 100%;
            height: 200px;
            background-color: black;
            z-index: 10000;
        }

        #admin-msg-list {
            z-index: 1001;
            position: fixed;
            top: 240px;
            width: 100%;
            height: auto;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
        }

        .admin-message {

        }

        .admin-user-name {
            color: #f7a72d;
        }

        #msg-list {
            height: 100%;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
        }

        .msg-item {
            padding: 8px;
        / / clear: both;
        }

        .msg-item .msg-user {
        / / width: 38 px;
            height: 38px;
            line-height: 38px;
            font-size: 14px;
        / / border: solid 1 px #d3d3d3;
            display: inline-block;
        / / background: #fff;
        / / border-radius: 3 px;
        / / vertical-align: top;
            text-align: center;
        / / float: left;
        / / padding: 3 px;
            margin-left: 3px;
            color: rgba(22, 11, 9, 0.77);
        }

        .msg-item .msg-user-img {
            width: 38px;
            height: 38px;
            display: inline-block;
            border-radius: 50%;
            vertical-align: top;
            text-align: center;
        / / float: left;
            color: #ddd;
        }

        .msg-item .msg-content {
            display: block;
            border-radius: 5px;
            border: solid 1px #d3d3d3;
            background-color: #FFFFFF;
            color: #333;
            padding: 8px;
            vertical-align: top;
            font-size: 13px;
            position: relative;
            margin: 0px 40px;
            max-width: 85%;
            min-width: 35px;
        / / float: left;
        }

        .msg-item .msg-content .msg-content-inner {
            overflow-x: hidden;
        }

        .msg-item .msg-content .msg-content-arrow {
            position: absolute;
            border: solid 1px #d3d3d3;
            border-right: none;
            border-top: none;
            background-color: #FFFFFF;
            width: 10px;
            height: 10px;
            left: -5px;
            top: 12px;
            -webkit-transform: rotateZ(45deg);
            transform: rotateZ(45deg);
        }

        .msg-item-self .msg-user,
        .msg-item-self .msg-content {
            float: right;
        }

        .msg-item-self .msg-content .msg-content-arrow {
            left: auto;
            right: -5px;
            -webkit-transform: rotateZ(225deg);
            transform: rotateZ(225deg);
        }

        .msg-item-self .msg-content,
        .msg-item-self .msg-content .msg-content-arrow {
            background-color: #4CD964;
            color: #fff;
            border-color: #2AC845;
        }

        footer {
            position: fixed;
            width: 100%;
            height: 50px;
            min-height: 50px;
            border-top: solid 1px #bbb;
            left: 0px;
            bottom: 0px;
            overflow: hidden;
            padding: 0px 50px;
            background-color: #fafafa;
        }

        .footer-left {
            position: absolute;
            width: 50px;
            height: 50px;
            left: 0px;
            bottom: 0px;
            text-align: center;
            vertical-align: middle;
            line-height: 100%;
            padding: 16px 4px;
        }

        .footer-right {
            position: absolute;
            width: 50px;
            height: 50px;
            right: 0px;
            bottom: 0px;
            text-align: center;
            vertical-align: middle;
            line-height: 100%;
            padding: 17px 5px;
            display: inline-block;
        }

        .footer-center {
            height: 100%;
            padding: 5px 0px;
        }

        .footer-center [class*=input] {
            width: 100%;
            height: 100%;
            border-radius: 5px;
        }

        .footer-center .input-text {
            background: #fff;
            border: solid 1px #ddd;
            padding: 10px !important;
            font-size: 16px !important;
            line-height: 18px !important;
            font-family: verdana !important;
            resize: none;
            overflow: hidden;
        }

        .input-emoji {
            position: relative;
        / / margin-bottom: 50 px;
        / / border: 1 px solid rebeccapurple;
            height: 150px;
            display: none;
            padding: 5px;
            text-align: center;
            background-color: white;
            overflow-y: scroll;
        }

        .login-panel {
            position: relative;
            margin-bottom: 0px;
            height: 150px;
            display: none;
            background-color: white;
            z-index: 1000;
        }

        .login-title {
            height: 36px;
            line-height: 36px;
            text-align: center;
        / / border-bottom: 1 px solid lightgrey;
            background-color: rgba(232, 8, 8, 0.77);
        }

        .login-icon {
            margin-top: 15px;
        }

        .footer {
            width: 100%;
            height: 42px;
            background: white;
        / / position: absolute;
        / / bottom: 0;
            padding: 2px;
        }

        .footer input {
            width: 82%;
            height: 38px;
            outline: none;
            font-size: 17px;
            text-indent: 10px;
            position: absolute;
            border: none;
        }

        .footer span {
            display: inline-block;
            width: 15%;
            height: 38px;
            background: #ccc;
            font-weight: 900;
            line-height: 38px;
            cursor: pointer;
            text-align: center;
            position: absolute;
            right: 5px;
            border-radius: 5px;
        }

        .footer span:hover {
            color: #fff;
            background: #999;
        }

        .content-block {
            margin: 0px;
        }

        .tag {
            float: right;
            display: inline-block;
            height: 22px;
            line-height: 22px;
            margin: 0px 8px 3px 15px;
            padding: 0px 8px;
            border: 1px solid #e9eaec;
            border-radius: 3px;
            font-size: 12px;
            vertical-align: middle;
            opacity: 1;
            overflow: hidden;
            cursor: pointer;
        }

        .tag-text {

        }

        .online-account {
            position: fixed;
            width: 100%;
            top: 170px;
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            background-color: whitesmoke;
            z-index: 10000;
            padding-left: 10px;
        }

        .chat-tab {
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            position: absolute;
            top: 240px;
            width: 100%;
            bottom: 50px;
            padding-bottom: 5px
        }

        .desc-tab {
            position: absolute;
            top: 240px;
            width: 100%;
            bottom: 0px;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 5px
        }

        .my-tab {
            position: absolute;
            top: 240px;
            width: 100%;
            bottom: 0px;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 5px
        }
    </style>
</head>
<body>
<div class="page-group">
    <div class="page">
        <div class="content">
            <!-- 这里是视频区域-->
            <div class="player" id="video" style="position: fixed;">
            </div>
            <!--菜单栏开始-->
            <div class="buttons-tab theme-dark" style="position: fixed;width: 100%;top:200px">
                <a href="#chatTab" class="tab-link active button">交流区(<span id="onlineNumbers"></span>人)</a>
                <a href="#descTab" class="tab-link button">简介</a>
                <a th:each="tab : ${liveInfo.tabs}" th:href="'#'+${tab.liveRoomTabId}"
                   th:text="${tab.tabName}" class="tab-link button"></a>
            </div>
            <!--菜单栏结束-->
            <div class="">
                <div class="tabs">
                    <!--自定义面板列表开始-->
                    <div th:each="tab : ${liveInfo.tabs}" th:id="${tab.liveRoomTabId}" class="tab my-tab">
                        <div class="content-block" th:utext="${tab.tabContent}">

                        </div>
                    </div>
                    <!--自定义面板列表结束-->
                    <!--聊天室面板开始-->
                    <div id="chatTab" class="tab active chat-tab"
                         data-toggle="scroller">
                        <!--消息滚动区域开始-->
                        <div class="" id="msg-list" style="z-index: 1000">

                            <div id="common-msg-list">

                            </div>

                        </div>
                        <!--消息滚动区域结束-->
                        <!--管理员消息区域-->
                        <!--<div class="" id="admin-msg-list">
                            <div style="height: 120px;width: 100%;background-color: #4CD964">xxx</div>
                        </div>-->
                        <!--管理员消息区域结束-->
                        <div class="" style="position:fixed;bottom:0px;width:100%;z-index:1000;">
                            <!--表情选择区开始-->
                            <div class="row no-gutter input-emoji" id="emojis">

                            </div>
                            <!--第三方登录面板开始-->
                            <div class="row no-gutter login-panel" id="loginPanel">
                                <div class="login-title">
                                    <span style="font-size: 14px;margin-left: 20px;color: white;">用户登录</span>
                                    <span class="icon icon-down" onclick="toggleLoginPanel()"
                                          style="float: right; margin-right: 20px;color: white"></span>
                                    <!--<span style="float: right; margin-right: 5px">x</span>-->
                                </div>
                                <div class="login-icon">
                                    <div class="row">
                                        <div class="col-50" style="text-align: center" onclick="qqlogin()">
                                            <img src="http://owggex94j.bkt.clouddn.com/image/ott/qq.png"
                                                 style="width: 48px;height:48px">
                                            <p style="margin: 0px;font-size: 14px">QQ登录</p>
                                        </div>
                                        <div class="col-50" style="text-align: center" onclick="weiboLogin()">
                                            <img src="http://owggex94j.bkt.clouddn.com/image/ott/weibo.png"
                                                 style="width: 48px;height:48px">
                                            <p style="margin: 0px;font-size: 14px">微博登录</p>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <!--第三方登录面板结束-->
                            <!--底部文字编辑发送区域开始-->
                            <footer id="footer">
                                <div class="footer-left">
                                    <i id='msg-image' class="icon icon-emoji" onclick="toggleEmojiPanel()"
                                       style="font-size: 28px;"></i>
                                </div>
                                <div class="footer-center">
                                    <textarea id='msg-text' type="text" class='input-text'></textarea>

                                    <!--<button id='msg-sound' type="button" class='input-sound' style="display: none;">按住说话</button>-->
                                </div>
                                <label id='sendMsg' class="footer-right" style="display: none">
                                    <span class="" style="color: #007aff"
                                          onclick="sendTextMsg()">发送</span>
                                </label>
                                <label id='login' class="footer-right" style="display: none">
                                    <span onclick="toggleLoginPanel()" class="" style="color: #007aff">
                                        登录
                                    </span>

                                </label>
                            </footer>
                            <!--底部文字编辑发送区域结束-->
                        </div>

                    </div>
                    <!--聊天室面板结束-->
                    <!--直播间简介面板开始-->
                    <div id="descTab" class="tab desc-tab">
                        <!--标题区域开始-->
                        <div class="" style="margin-left: 0.75em">
                            <div style="margin: 8px 8px 0px 0px;">
                                <p th:text="${liveInfo.title}" style="display: inline"></p>
                                <div class="tag" style="background-color: #2AC845">
                                    <span class="tag-text"  style="">直播中</span>
                                </div>

                            </div>

                        </div>
                        <p style="font-size: 12px;margin-top: 5px; margin-left: 1em"
                           th:text="'时间:'+ ${#calendars.format(liveInfo.timeStart,'yyyy-MM-dd HH:mm')}"></p>
                        <!--标题区域结束-->
                        <hr style="border:0;background-color:rgba(22,11,9,0.4);height:1px;">
                        <!--活动简介区域开始-->
                        <div style="margin-left: 0.75em">
                            <span style="display: inline-block;height: 12px;width: 5px;background-color: #2AC845"></span>
                            <span style="margin-left: 5px">活动简介</span>
                        </div>
                        <div class="content-block" style="position: relative" th:utext="${liveInfo.roomDesc}">

                        </div>
                        <!--活动简介区域结束-->
                    </div>
                    <!--直播间简介面板结束-->

                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.js"></script>

<script src="//qzonestyle.gtimg.cn/open/qcloud/video/live/h5/live_connect.js" charset="utf-8"></script>
<script src="https://cdn.ronghub.com/RongIMLib-2.2.7.min.js"></script>
<!--<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>-->
<script src="https://cdn.ronghub.com/RongEmoji-2.2.5.min.js"></script>
<script src="/zepto.cookie.js"></script>

<!--qq第三方登录js-->
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" charset="utf-8"></script>
<script>
    $.config = {router: false}
</script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.js' charset='utf-8'></script>
<script th:inline="javascript">
    $(document).ready(function () {
        userInfo = [[${liveInfo.userInfo}]]
        console.log(userInfo)
        if (userInfo.name && userInfo.uid && userInfo.avatar){
            //用户已经登录
            $.fn.cookie('userInfo',JSON.stringify(userInfo),{ expires : 7 })
        }
        if (!$.fn.cookie('userInfo')) {
            //用户匿名登录,便于利用融云在线人数来统计房间在线人数，解放服务器压力

            anonymousLoginChatRoom();
            //用户未登录，不允许发送消息
            //禁用输入框
            $("#msg-text").attr('placeholder', '请登录后发言哦')
            $("#msg-text").attr("disabled", true);
            $('#login').show()


        } else {
            userInfo = JSON.parse($.fn.cookie('userInfo'))
            //用户已经登录
            $("#msg-text").attr('placeholder', '发表你的看法吧')
            $('#sendMsg').show()
            //加入聊天室
            ottLoginChatRoom()

        }

        //>>>>>>>加载直播地址<<<<<<<
        //初始化视频播放器
        var player = new qcVideo.Player("video", {
            "live_url": [[${liveInfo.hlsUrl}]],
            "live_url2": [[${liveInfo.flvUrl}]],
            "height": 200,
            "h5_start_patch":{
                "url": [[${liveInfo.videoPoster}]],
                "stretch": true
            },
            "x5_type":"h5",
            "x5_fullscreen":true
        });

        //监听输入框focus事件
        $('#msg-text').focus(function () {
            $('#emojis').hide()
            $("#footer").css('bottom', "0px")
        })
        //监听表情选择
        $('#emojis span').on('click', function () {
            var emojiName = RongIMLib.RongIMEmoji.emojiToSymbol($(this)[0].getAttribute("name"));
            $('#msg-text').val($('#msg-text').val() + emojiName);
        })
        //监听消息滚动
        $('#msg-list').scroll(function () {
            scrollState = true
            setTimeout(function () {
                scrollState = false
            }, 3000)
        })
        //监听表情面板失去焦点事件
        //定时获取当前直播间人数

        $.init();

    });
    //数据初始化
    var scrollState = false
    //用户登录信息
    var userInfo = {
        avatar: '',
        name: '',
        uid: ''
    }
    var rongCloudKey = 'tdrvipkstqzt5'
    //显示第三方登录
    function toggleLoginPanel() {
        $('#loginPanel').toggle()
    }
    //qq登录
    function qqlogin() {
        quitChatRoom()
        window.location.href="https://graph.qq.com/oauth2.0/authorize?client_id=101431637&response_type=code&display=mobile&redirect_uri=http://www.jackhoo.cn/oauth/qq&state="+location.href;
    }
    //微博登录
    function weiboLogin() {
        quitChatRoom()
        window.location.href="https://api.weibo.com/oauth2/authorize?client_id=2725134099&response_type=code&redirect_uri=http://www.jackhoo.cn/oauth/weibo&state="+location.href;
    }

    //显示和隐藏在线人数统计栏
    function toggleAccountPanel() {
        $('#onlineAccontPanel').toggle();
    }
    //匿名登录
    function anonymousLoginChatRoom() {
        //融云聊天服务
        RongIMLib.RongIMClient.init(rongCloudKey)
        registerMsgType()
        //表情初始化
        RongIMLib.RongIMEmoji.init();

        initEmojis(RongIMLib.RongIMEmoji.emojis)
        //设置监听器
        setConnectionStatusListener();
        setOnReceiveMessageListener();
        //连接融云服务器并加入聊天室
        connectToRongCloud(getRongCloudAnoToken());
    }
    //具名登录
    function ottLoginChatRoom() {

        //融云聊天服务
        RongIMLib.RongIMClient.init(rongCloudKey)
        registerMsgType()
        //表情初始化
        RongIMLib.RongIMEmoji.init();
        initEmojis(RongIMLib.RongIMEmoji.emojis)
        //设置监听器
        setConnectionStatusListener();
        setOnReceiveMessageListener();
        //连接融云服务器并加入聊天室
        connectToRongCloud(getRongCloudToken());
    }

    //获取用户token
    function getRongCloudToken() {
        var token = '';
        var user = {
            nickname: userInfo.name,
            avatarUrl: userInfo.avatar,
            openId: userInfo.uid
        }
        console.log(user)
        $.ajax({
            url: '/rong_cloud/token',
            type: 'post',
            async: false,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: JSON.stringify(user),
            success: function (data) {
                //连接融云服务器
                console.log(data)
                if (data.code == 0) {
                    token = data.token;
                } else {
                    //alert('您已经在聊天室中')
                }

            },
            error: function () {
                console.log('网络错误')
            }
        })
        return token;
    }

    //匿名登录融云获取token
    function getRongCloudAnoToken() {
        var token = '';
        $.ajax({
            url: '/rong_cloud/random_token',
            type: 'get',
            async: false,
            success: function (data) {
                //连接融云服务器
                token = data.token;
            },
            error: function () {
                console.log('网络错误')
            }
        })
        return token;
    }
    //注册融云自定义消息
    function registerMsgType() {
        var messageName = "AdminMessage"; // 消息名称。
        var objectName = "s:admin"; // 消息内置名称，请按照此格式命名。
        var mesasgeTag = new RongIMLib.MessageTag(true, true);// 消息是否保存是否计数，true true 保存且计数，false false 不保存不计数。
        var propertys = ["content"]; // 消息类中的属性名。
        RongIMClient.registerMessageType(messageName, objectName, mesasgeTag, propertys);
    }
    //发送文本消息
    function sendTextMsg() {
        // 定义消息类型,文字消息使用 RongIMLib.TextMessage
        //附加信息需要包含用户自身名字和头像

        var sender = {
            username: userInfo.name,
            avatar: userInfo.avatar
        }
        var contentToSend = RongIMLib.RongIMEmoji.symbolToEmoji($('#msg-text').val());
        if (contentToSend == null || contentToSend == '') {
            return false;
        }
        var msg = new RongIMLib.TextMessage({content: contentToSend, extra: sender});
        //或者使用RongIMLib.TextMessage.obtain 方法.具体使用请参见文档
        //var msg = RongIMLib.TextMessage.obtain("hello");
        var conversationtype = RongIMLib.ConversationType.CHATROOM; // 聊天室
        var targetId = [[${liveInfo.chatRoomId}]]; // 目标 Id
        RongIMClient.getInstance().sendMessage(conversationtype, targetId, msg, {
            // 发送消息成功
            onSuccess: function (message) {
                //message 为发送的消息对象并且包含服务器返回的消息唯一Id和发送消息时间戳
                appendToBottom(message.content.extra.username, message.content.extra.avatar, message.content.content)
                $('#emojis').hide()
                $("#footer").css('bottom', "0px")
            },
            onError: function (errorCode, message) {
                var info = '';
                switch (errorCode) {
                    case RongIMLib.ErrorCode.TIMEOUT:
                        info = '超时';
                        break;
                    case RongIMLib.ErrorCode.UNKNOWN_ERROR:
                        info = '未知错误';
                        break;
                    case RongIMLib.ErrorCode.REJECTED_BY_BLACKLIST:
                        info = '在黑名单中，无法向对方发送消息';
                        break;
                    case RongIMLib.ErrorCode.NOT_IN_DISCUSSION:
                        info = '不在讨论组中';
                        break;
                    case RongIMLib.ErrorCode.NOT_IN_GROUP:
                        info = '不在群组中';
                        break;
                    case RongIMLib.ErrorCode.NOT_IN_CHATROOM:
                        info = '不在聊天室中';
                        break;
                    default :
                        info = x;
                        break;
                }
                console.log('发送失败:' + info);
            }
        });
    }
    //添加管理员消息
    function appendAdminMsg(name, avatarUrl, content) {
        var html = "<p>小葵花课堂开课啦</p><p><a href=' " +
            "'http://www.baidu.com' target='_blank'>猛搓有奖</a><br></p>"+
            "<p> <img src = 'http://owggex94j.bkt.clouddn.com/FtMgH62gHGYK4oRULfCxo7N6790w'" +
            +"style = 'max-width:100%;'> <br> </p>"
        var adminItem = "<div class='msg-item admin-message'>" +
            "<img class='msg-user-img' src=" + avatarUrl + " alt=''/>" +
            "<span class='msg-user admin-user-name' style='color: #f7a72d'>" + '管理员' +
            "<span style='color: red'>[置顶]</span>" +
            "</span>:" +
            "<div class='msg-content'>" +
            "<div class='msg-content-inner '>" + content +
            "&nbsp;&nbsp;" +
            "</div>" +
            "<div class='msg-content-arrow'></div>" +
            "</div>" +
            "</div>"
        $('#msg-list').prepend(adminItem)
        if (!scrollState) {
            $('#msg-list').scrollTop(0)
        }
    }
    //添加普通用户聊天消息
    function appendToBottom(name, avatarUrl, content) {
        //判断消息列表的条数，最多100条
        var msgNumbers = $('#msg-list >div').length
        if (msgNumbers > 100) {
            $('#msg-list >div:first-child').remove()
        }
        var commonItem = "<div class='msg-item common-message'>" +
            "<img class='msg-user-img' src=" + avatarUrl + " alt=''/>" +
            "<span class='msg-user'>" + name + ":</span>" +
            "<div class='msg-content'>" +
            "<div class='msg-content-inner'>" + content +
            "&nbsp;&nbsp;" +
            "</div>" +
            "<div class='msg-content-arrow'></div>" +
            "</div>" +
            "</div>"
        $('#common-msg-list').prepend(commonItem)
        //$(commonItem).prepend($('.admin-message'));
        $('#msg-text').val('');
        if (!scrollState) {
            $('#msg-list').scrollTop(0)
        }
        //$('#msg-list').scrollTop($('#msg-list')["0"].scrollHeight)
        //$('#chatTab').animate({scrollTop:$('#chatTab')["0"].scrollHeight},300)
    }

    //聊天室信息(在线人数，成员)
    function getChatRoomState() {
        var order = RongIMLib.GetChatRoomType.REVERSE;// 排序方式。
        var chatRoomId = [[${liveInfo.chatRoomId}]];
        RongIMClient.getInstance().getChatRoomInfo(chatRoomId, 10, order, {
            onSuccess: function (chatRoom) {
                // chatRoom => 聊天室信息。
                // chatRoom.userInfos => 返回聊天室成员。
                // chatRoom.userTotalNums => 当前聊天室总人数。
                $('#onlineNumbers').text(chatRoom.userTotalNums)
                console.log(chatRoom.userTotalNums)
            },
            onError: function (error) {
                // 获取聊天室信息失败。
            }
        });
    }

    //加入聊天室
    function joinChatRoom() {
        var chatRoomId = [[${liveInfo.chatRoomId}]]; // 聊天室 Id。
        var count = 10;// 拉取最近聊天最多 50 条。
        RongIMClient.getInstance().joinChatRoom(chatRoomId, count,
            {
                onSuccess: function () {
                    // 加入聊天室成功。
                    console.log('加入聊天室成功。');
                    //获取当前聊天室人数
                    getChatRoomState()
                    //定时器刷新在线人数
                    setInterval("getChatRoomState()", 2000);
                },
                onError: function (error) {
                    // 加入聊天室失败

                }
            }
        );
    }
    //退出聊天室
    function quitChatRoom() {
        var chatRoomId = [[${liveInfo.chatRoomId}]]; // 聊天室 Id。
        RongIMClient.getInstance().quitChatRoom(chatRoomId, {
            onSuccess: function () {

                // 退出聊天室成功。
            },
            onError: function (error) {
                // 退出聊天室失败。
            }
        });
    }
    //连接融云服务器
    function connectToRongCloud(token) {
        RongIMClient.connect(token, {
            onSuccess: function (userId) {
                console.log("Login successfully." + userId);

                //加入聊天室
                try {
                    joinChatRoom();
                } catch (e) {
                    console.log(e)
                }


            },
            onTokenIncorrect: function () {
                console.log('token无效');
            },
            onError: function (errorCode) {
                var info = '';
                switch (errorCode) {
                    case RongIMLib.ErrorCode.TIMEOUT:
                        info = '超时';
                        break;
                    case RongIMLib.ErrorCode.UNKNOWN_ERROR:
                        info = '未知错误';
                        break;
                    case RongIMLib.ErrorCode.UNACCEPTABLE_PaROTOCOL_VERSION:
                        info = '不可接受的协议版本';
                        break;
                    case RongIMLib.ErrorCode.IDENTIFIER_REJECTED:
                        info = 'appkey不正确';
                        break;
                    case RongIMLib.ErrorCode.SERVER_UNAVAILABLE:
                        info = '服务器不可用';
                        break;
                }
                console.log(errorCode);
            }
        });
    }

    // 设置连接监听状态 （ status 标识当前连接状态）
    // 连接状态监听器
    function setConnectionStatusListener() {
        RongIMClient.setConnectionStatusListener({
            onChanged: function (status) {
                switch (status) {
                    //链接成功
                    case RongIMLib.ConnectionStatus.CONNECTED:
                        console.log('链接成功');
                        break;
                    //正在链接
                    case RongIMLib.ConnectionStatus.CONNECTING:
                        console.log('正在链接');
                        break;
                    //重新链接
                    case RongIMLib.ConnectionStatus.DISCONNECTED:
                        console.log('断开连接');
                        break;
                    //其他设备登陆
                    case RongIMLib.ConnectionStatus.KICKED_OFFLINE_BY_OTHER_CLIENT:
                        console.log('其他设备登陆');
                        break;
                    //网络不可用
                    case RongIMLib.ConnectionStatus.NETWORK_UNAVAILABLE:
                        console.log('网络不可用');
                        break;
                }
            }
        });
    }

    // 消息监听器
    function setOnReceiveMessageListener() {
        RongIMClient.setOnReceiveMessageListener({
            // 接收到的消息
            onReceived: function (message) {
                // 判断消息类型
                switch (message.messageType) {
                    case RongIMClient.MessageType.TextMessage:
                        appendToBottom(message.content.extra.username,
                            message.content.extra.avatar, RongIMLib.RongIMEmoji.emojiToHTML(message.content.content))
                        break;
                    case RongIMClient.MessageType.AdminMessage:
                        //监听系统后台管理员发送的消息
                        console.log(message)
                        appendAdminMsg("管理员", "http://pic.58pic.com/58pic/15/45/63/51R58PICzqV_1024.png", message.content.content)
                        break;
                    case RongIMClient.MessageType.ImageMessage:
                        // do something...
                        break;
                    case RongIMClient.MessageType.DiscussionNotificationMessage:
                        // do something...
                        break;
                    case RongIMClient.MessageType.LocationMessage:
                        // do something...
                        break;
                    case RongIMClient.MessageType.RichContentMessage:
                        // do something...
                        break;
                    case RongIMClient.MessageType.DiscussionNotificationMessage:
                        // do something...
                        break;
                    case RongIMClient.MessageType.InformationNotificationMessage:
                        // do something...
                        break;
                    case RongIMClient.MessageType.ContactNotificationMessage:
                        // do something...
                        break;
                    case RongIMClient.MessageType.ProfileNotificationMessage:
                        // do something...
                        break;
                    case RongIMClient.MessageType.CommandNotificationMessage:
                        // do something...
                        break;
                    case RongIMClient.MessageType.CommandMessage:
                        // do something...
                        break;
                    case RongIMClient.MessageType.UnknownMessage:
                        // do something...
                        console.log(message)
                        break;

                    default:
                    // 自定义消息
                    // do something...
                }
            }
        });
    }

    //融云重试配置

    //显示表情选择面板
    function toggleEmojiPanel() {
        //如果用户未登录则不显示
        if (!$.fn.cookie('userInfo')){
            return false;
        }
        $('#emojis').toggle()
        var emojis = $('#emojis').css('display')
        if (emojis == "none") {
            $("#footer").css('bottom', "0px")
        }
        if (emojis == "block") {
            $("#footer").css('bottom', "150px")
        }
    }

    //初始化表情面板
    function initEmojis(emojis) {
        for (var i = 0; i < emojis.length; i++) {
            $('#emojis').append('<div class="col-10" style="text-align: center;margin-bottom: 6px">' + emojis[i].innerHTML + '</div>');
        }

    }
    function randomString(len) {
        len = len || 32;
        var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
        /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
        var maxPos = $chars.length;
        var pwd = '';
        for (i = 0; i < len; i++) {
            pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
        }
        return pwd;
    }
</script>

</body>

